{% extends 'myadmin3/my_master.html' %}

{% block body %}
    {{ super() }}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">User Profile</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ admin_view.admin.url }}">Home</a></li>
                        <li class="breadcrumb-item active">User Profile</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <div class="container">
        <!-- Section: Team v.1 -->
        <section class="section team-section">
            <!-- Grid row -->
            <div class="row">
                <!-- Grid column -->
                <div class="col-md-8 mb-4">
                    <!-- Card -->
                    <div class="card">
                        <!-- Card Data -->
                        <div class="card-header text-center">
                            <h3 class="mb-0 font-weight-normal">Edit User Profile</h3>
                        </div>
                        <!-- Card Data -->

                        <!-- Card content -->
                        <form class="card-body" method="POST" action="{{ url_for('profile.index') }}">
                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-6">
                                    <div class="md-form form-sm mb-0">
                                        <label for="username">Username</label>
                                        <input type="text" name="username" class="form-control form-control-sm"
                                               id="username" value="{{ current_user.username }}" disabled>
                                    </div>
                                </div>
                                <!-- Grid column -->

                                <!-- Grid column -->
                                <div class="col-md-6">
                                    <div class="md-form form-sm mb-0">
                                        <label for="email">Email Address</label>
                                        <input type="email" name="email" class="form-control form-control-sm" id="email"
                                               value="{{ current_user.email }}" disabled>
                                    </div>
                                </div>
                                <!-- Grid column -->
                            </div>
                            <!-- Grid row -->

                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-6">
                                    <div class="md-form form-sm mb-0">
                                        <label for="first_name">First Name</label>
                                        <input type="text" name="first_name" class="form-control form-control-sm"
                                               id="first_name" value="{{ current_user.first_name }}">
                                    </div>
                                </div>
                                <!-- Grid column -->

                                <!-- Grid column -->
                                <div class="col-md-6">
                                    <div class="md-form form-sm mb-0">
                                        <label for="last_name">Last Name</label>
                                        <input type="text" name="last_name" class="form-control form-control-sm"
                                               id="last_name" value="{{ current_user.last_name }}">
                                    </div>
                                </div>
                                <!-- Grid column -->

                            </div>
                            <!-- Grid row -->

                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-12">
                                    <div class="md-form form-sm mb-0">
                                        <label for="location">Nick Name</label>
                                        <input type="text" name="nick_name" class="form-control form-control-sm"
                                               id="location" value="
                                                {% if current_user.nick_name %}{{ current_user.nick_name }}{% endif %}">
                                    </div>
                                </div>
                                <!-- Grid column -->
                            </div>
                            <!-- Grid row -->

                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-12">
                                    <div class="md-form form-sm mb-0">
                                        <label for="location">Address</label>
                                        <input type="text" name="location" class="form-control form-control-sm"
                                               id="location" value="
                                                {% if current_user.location %}{{ current_user.location }}{% endif %}">
                                    </div>
                                </div>
                                <!-- Grid column -->
                            </div>
                            <!-- Grid row -->

                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-12">
                                    <div class="md-form form-sm mb-0">
                                        <label for="website">Website</label>
                                        <input type="text" name="website" class="form-control form-control-sm"
                                               id="website" value="
                                                {% if current_user.website %}{{ current_user.website }}{% endif %}">
                                    </div>
                                </div>
                                <!-- Grid column -->
                            </div>
                            <!-- Grid row -->

                            <!-- Grid row -->
                            <div class="row mb-3">
                                <!-- Grid column -->
                                <div class="col-md-12">
                                    <h4 class="text-muted text-left">About me</h4>
                                    <!-- Basic textarea -->
                                    <div class="md-form mb-0">
                                        <textarea name="bio" class="form-control md-textarea" id="bio"
                                                  placeholder="Basic textarea">{% if current_user.bio %}
                                            {{ current_user.bio }}{% endif %}</textarea>
                                    </div>
                                </div>
                                <!-- Grid column -->
                            </div>
                            <!-- Grid row -->

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block">Submit</button>
                            </div>
                        </form>
                        <!-- Card content -->
                    </div>
                </div>
                <!-- Card -->

                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-4 mb-4">
                    <!-- Card -->
                    <div class="card">
                        <div class="card-body text-center">
                            <h3 class="profile-username">
                                <strong>{{ current_user.email }}</strong>
                            </h3>

                            <p class="text-muted">
                                {% if current_user.roles %} {{ current_user.roles[0].name }} {% endif %}
                            </p>

                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <b class="float-left">Username</b>
                                    <a class="float-right">{{ current_user.username }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b class="float-left">Email</b>
                                    <a class="float-right">{{ current_user.email }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b class="float-left">Address</b>
                                    <a class="float-right">{{ current_user.location }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b class="float-left">Website</b>
                                    <a class="float-right">{{ current_user.website }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b class="float-left">Bio</b>
                                    <a class="float-right">{{ current_user.bio }}</a>
                                </li>
                            </ul>

                            <button class="btn btn-danger btn-block btn-sm" data-toggle="modal"
                                    data-target="#modal-default">
                                Change Password
                            </button>
                        </div>

                        <div class="modal fade" id="modal-default">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Change Password</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="POST" action="{{ url_for('profile.set_password') }}" role="form"
                                              oninput='password2.setCustomValidity(password.value != password2.value ? "Passwords do not match." : "")'>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="currentPassword">Old Password</label>
                                                    <input type="password" class="form-control" id="currentPassword"
                                                           required name="old_password">
                                                </div>
                                                <div class="form-group">
                                                    <label for="newPassword">New Password</label>
                                                    <input type="password" class="form-control" id="newPassword"
                                                           required name="password">
                                                </div>
                                                <div class="form-group">
                                                    <label for="confirmedPassword">Confirm Password</label>
                                                    <input type="password" class="form-control" id="confirmedPassword"
                                                           name="password2">
                                                </div>
                                            </div>
                                            <div class="modal-footer justify-content-between">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card -->

                <!-- Grid column -->
            </div>
            <!-- Grid row -->

        </section>
        <!-- Section: Team v.1 -->

    </div>
{% endblock %}